<template>
	<view>
		<u-navbar title="供应商品" leftIconSize="20px" leftIconColor="#fff" bgColor="transparent" :autoBack="false"
			titleStyle="color:#fff" @leftClick="back">
		</u-navbar>
		<view class="topInfo">
			<view class="u-navbar__placeholder" :style="{
					height: $u.addUnit($u.getPx(44) + $u.sys().statusBarHeight,'px'),
				}"></view>
			<view class="company nowrap-ellipsis">{{supplierInfo.name||''}}</view>
			<text>{{supplierInfo.userName}}</text>
			<view class="eidtButton flex_center" hover-stay-time="300" @tap.stop="$u.throttle(editTo, 500)">
				<u-icon name="edit-pen" color="#2979ff" size="32rpx"></u-icon>
				<text class="edidText">编辑</text>
			</view>
		</view>
		<view class="list">
			<view class="listTil">
				供应商品
			</view>
			<view class="item" v-for="(i,j) in list" :key="j">
				<view class="item-top flex_start_center">
					<u-image width="160rpx" height="160rpx" :src="i.imageList?i.imageList.split(',')[0]:''"
						:lazy-load="true" mode="aspectFill" radius="4rpx">
						<template v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template>
						</u-image>
					<view class="item-top-right flex_column_between_start">
						<text class="title nowrap-ellipsis">{{i.name||'暂无'}}</text>
						<text class="num">¥{{i.price||'暂无'}}</text>
						<text>产品规格：{{i.specs}}</text>
					</view>

				</view>
				<view class="actionButton flex_between_center">
					<view class="left" @tap="tapDel(i)">
						删除
					</view>
					<view class="right" @tap.prevent="addHandle(i)">
						编辑
					</view>
				</view>
			</view>
			<view class="empty" v-if="firstLoad && !list.length">
				<u-empty mode="car" iconSize="120rpx" textSize="28rpx" text="暂时没有供应"
					icon="https://file.casugn.com/storecompcard/temp/空页面@2x(7)_1681113965894.png">
				</u-empty>
			</view>
		</view>
		<u-modal :show="showDel" ref="uModal" :asyncClose="true" title="确定删除？" confirmColor="#F53F3F" confirmText="删除"
			showCancelButton @cancel="cancelDel" @confirm="confirmDel"></u-modal>
		<cus-add-btn :safeAreaInsetBottom="false" @click="addHandle('')"></cus-add-btn>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				firstLoad: false,
				orgUrl: '',
				info: {
					name: '王伟',
					company: '山东日照一品商业有限公司山东日照一品商业有限公司'
				},
				list: [],
				needId: '',
				showDel: false,
				row: {}, //待操作对象
			}
		},
		computed: {
			...mapGetters({
				supplierId: 'getSupplierId',
				haveSupplier: 'getHaveSupplier',
				supplierInfo: 'getSupplierInfo',
			}),
		},
		onShow() {
			this.getList()
		},
		onLoad(option) {
			//release 为从完善企业信息跳转入
			console.log(option, 'option')
			this.orgUrl = option.path || ''
		},
		methods: {
			cancelDel() {
				this.row = {}
				this.showDel = false
			},
			//确认删除
			confirmDel() {
				this.$api.deleteSupplyProduct(this.row.id).then(res => {
					this.getList()
				}).finally(() => {
					this.showDel = false
				})
			},
			//删除弹窗
			tapDel(item) {
				uni.$u.throttle(() => {
					this.showDel = true
					this.row = item

				}, 500)
			},
			//获取产品列表
			getList() {
				if (this.supplierId) {
					this.$api.querySupplyNewProductLists({
						supplierId: this.supplierId
					}).then(res => {
						if (res.success) {
							this.list = res.result || []
						} else {
							this.$showToast(res.message)
						}
						this.firstLoad = true
					})
				} else {
					this.list = []
					this.firstLoad = true
				}

			},
			addHandle(item) {
				uni.$u.throttle(() => {
					let submitInfo = item ? ('&submitInfo=' + JSON.stringify(item)) : ''
					uni.navigateTo({
						url: '/pagesBusiness/supplyProduct/supplyProduct?supplierId=' + this.supplierId +
							submitInfo
					})
				}, 500)

			},
			editTo() {
				this.$toPage('/pagesBusiness/supply/supply')
			},
			back() {
				let url = this.orgUrl == 'release' ? '/pages/release/release' : '/pages/user/user'
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F7F8FA;
	}

	view {
		box-sizing: border-box;
	}

	::v-deep {
		.uicon-edit-pen {
			top: 1px !important;
		}
	}

	.topInfo {
		padding: 24rpx 32rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background: linear-gradient(to left, #2367ec, #044ddd);
		line-height: 34rpx;
		position: sticky;
		top: 0;
		z-index: 10;

		.eidtButton {
			width: 158rpx;
			height: 56rpx;
			font-size: 28rpx;
			position: absolute;
			right: 32rpx;
			bottom: 25rpx;
			color: #276AEE;
			background-color: #E9F0FD;
			border-radius: 4rpx;

			&:active {
				opacity: .8;
			}

			.edidText {
				margin-left: 12rpx;
			}
		}

		.company {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			margin-bottom: 16rpx;
			width: 500rpx;
		}
	}

	.list {
		padding: 0 32rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

		.listTil {
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 96rpx;
			height: 96rpx;
			margin-top: 24rpx;
			position: sticky;

		}

		.item {
			padding: 24rpx 32rpx 16rpx;
			border-radius: 8rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.item-top {
				border-bottom: 1px solid #E5E6EB;
			}

			.item-top-right {
				font-size: 24rpx;
				color: #86909C;
				line-height: 34rpx;
				margin-left: 32rpx;
				padding-bottom: 24rpx;
				flex: 1;

				.title {
					max-width: 420rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 39rpx;
					margin-top: 24rpx;
				}

				.num {
					font-size: 28rpx;
					color: #FF7D00;
					margin: 16rpx 0;
				}

			}

			.actionButton {
				padding-top: 8rpx;

				.left,
				.right {
					height: 56rpx;
					line-height: 56rpx;
					width: 50%;
					font-size: 28rpx;
					text-align: center;

					&:active {
						opacity: .8;
					}
				}

				.left {
					color: #F53F3F;
				}

				.right {
					color: #276AEE;
				}
			}
		}

		.empty {
			padding-top: 186rpx;
		}
	}
</style>